<template>
	<view>
		<view class="nav2">
			<u-navbar title="助力" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<!-- 助力 -->
		<u-popup :show="show_zl" @close="show_zl = false" mode="center" :customStyle="{'width':'80%'}" @open="show_zl = true" round="20" bgColor="transparent" :closeOnClickOverlay="false">
			<view class="pore">
				<image src="https://hxs.dsjhs.com:553/prod-api/profile/zl.png" mode="widthFix" class="width100"></image>
				<view class="zl-data" :style="{'top':help?'-50rpx':'10rpx'}">
					<view class="">
						<image v-if="help" src="https://hxs.dsjhs.com:553/prod-api/profile/zl_icon.png" mode="widthFix" style="width:40%"></image>
						<image v-else src="../static/caractere/zl_success.png" mode="widthFix" style="width:80%"></image>
					</view>
					<view class="name">
						<text class="f24 c343">{{user.userName | namEncryption}} 的助力邀请</text>	
					</view>
					<view class="" v-if="help">
						<u-gap height="30"></u-gap>
						<view class="f40 c343 bold">帮我点一点</view>
						<u-gap height="10"></u-gap>
						<view class="f32 c343">我就可以获取报告啦～</view>
						<u-gap height="20"></u-gap>
					</view>
					<u-gap height="50" v-if="!help"></u-gap>
					<view class="textC">
						<image v-if="help" src="../static/caractere/lock3.png" mode="widthFix" style="width:40%"></image>
						<image v-else :src="api_host + xg_img" mode="widthFix" style="width:40%" class="radius30 xg_img"></image>
					</view>
					<u-gap height="20"></u-gap>
					<view class="flex-au" v-if="userInfo.userPhone">
						<u-button shape="circle" color="#FFDE6D" @click="exit"
							:customStyle="{'color':'#34314F','width':'80%'}">
							抱歉，仅限新用户帮助解锁！
						</u-button>
					</view>
					<view class="flex-au" v-else>
						<u-button v-if="help" shape="circle" color="#FFDE6D" open-type="getPhoneNumber" @getphonenumber="getPhonebtn"
							:customStyle="{'color':'#34314F','width':'50%'}">
							帮Ta助力
						</u-button>
						<u-button v-else shape="circle" color="#FFDE6D" @click="toAnswer"
							:customStyle="{'color':'#34314F','width':'50%'}">
							我也要测
						</u-button>
					</view>
				</view>
			</view>
			<view class="p30 pore textC" style="z-index: 99;">
				<u-gap height="20"></u-gap>
				<view class="flex-au" @click="exit">
					<u-icon name="close-circle-fill" color="#000" size="26"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		mapActions
	} from 'vuex'
	import {getResultlock,reportUnlock} from '@/common/api_character.js'
	import {getUserinfobyid,getPhone} from '@/common/api_user.js'
	export default {
		name:'',
		data() {
			return {
				user:{},
				phone:'',
				id:'',
				show_zl:false,
				help:true,
				xg_img:'/profile/upload/2024/06/13/5ef6fd8ed0034dc2a691f5e0816197c9_20240613094457A007.jpg'
			}
		},
		async onLoad(option) {
			this.userId = option.user_id
			this.id = option.id
			await this.$onLaunched;
			this.getUserinfobyid()
		},
		filters:{
			namEncryption(text){
				let str = ''
				str = text.substring(0,1) + '****' + text.substring(text.length - 1)
				return str
			}
		},
		methods: {
			...mapActions(['getUserinfo']),
			async getUserinfobyid(){
				uni.showLoading({
					mask:true
				})
				const res = await getUserinfobyid({
					userId:this.userId
				})
				if(res.code == 200){
					this.user = res.data
					this.getResultlock()
				}
			},
			async getResultlock(){
				uni.showLoading({
					mask:true
				})
				const res = await getResultlock({
					id:this.id
				})
				if(res.code == 200){
					if(res.data.isLock == 0){
						this.show_zl = true
					}else{
						uni.showModal({
							title:'提示',
							content:'该报告已解锁',
							confirmText:'我也要测',
							cancelText:'取消',
							success(res) {
								if(res.confirm){
									uni.reLaunch({
										url:'/subpage/caractere/index'
									})
								}else{
									uni.reLaunch({
										url:'/pages/index/index'
									})
								}
							}
						})
					}
				}
				uni.hideLoading()
			},
			async exit(){
				this.show_zl = false
				await this.getUserinfo()
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			async getPhonebtn(val) {
				const that = this
				let info = val.detail
				if (info.errMsg == 'getPhoneNumber:ok') {
					uni.showLoading()
					const res = await getPhone({
						code: info.code
					})
					if (res.code == 200) {
						that.phone = res.msg
						that.helpSubmit()
					}
			
				}
			},
			async helpSubmit(){
				uni.showLoading({
					mask:true,
					title:'助力中...'
				})
				const res = await reportUnlock({
					id:this.id,
					phone:this.phone
				})
				if(res.code == 200){
					this.xg_img = res.data.icon
					this.help = false
					//this.getUserinfo()
				}
				uni.hideLoading()
			},
			async toAnswer(){
				this.show_zl = false
				await this.getUserinfo()
				uni.redirectTo({
					url:'/subpage/caractere/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}
	.zl-data{
		position: absolute;
		left: 0;
		width: 100%;
		text-align: center;
		.name{
			width:50%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 6rpx 0;
			border: 1px solid #FFDE6D;
		}
	}
	.xg_img{
		border: 4rpx solid #FFDE6D;
	}
</style>
